<template>
    <view class="content">
        <van-nav-bar :title="scrolling? navBarTitle : '' " left-arrow @click-left="onClickLeft" id="navBar"> </van-nav-bar>
        <scroll-view class="scroll-content" scroll-y :lower-threshold="80" @scroll="scrollPage" show-scrollbar="false">
            <view class="tabTop">
                <view class="title"> {{navBarTitle}} </view>
                <view class="checkedInDay">连续签到{{blindBoxInfo.consecutiveDays}}天奖励</view>
                <view class="mysteryBoxProgress">
                    <view style="width:296rpx;height: 382rpx;" class="blindBoxBg">
                        <img :src="blindBoxInfo.imageUrl"  alt="" style="width:100%; height:auto" mode="widthFix" />
                    </view>
                    <view class="progressText">已完成{{blindBoxInfo.remainingDays}}/ {{blindBoxInfo.consecutiveDays}}</view>
                    <view class="tasksProgress">
                        <van-progress :percentage="Number((blindBoxInfo.remainingDays/ blindBoxInfo.consecutiveDays) * 100).toFixed(0)" stroke-width="8px"
                            color="#F1551C" track-color="#FFDFCB" show-pivot="false" show-info="false" />
                    </view>
                </view>
    
                <!-- 记录 -->
                <view>
                    <view class="subtitle">参与记录</view>
                    <template v-if="recordList.length > 0">
                        <view class="recordList" v-for="(item,index) in recordList" :key="index">
                            <view class="checkInDate">{{item.signDate}}</view>
                            <view class="checkInStatus">已签到</view>
                        </view>
                    </template>
                    <template v-else>
                        <van-empty class="custom-image"
                            image="https://17lelife-bucket.oss-cn-beijing.aliyuncs.com/WeChat-App-Picture/emptyGift.png"
                            description="暂无签到记录" />
                    </template>

                </view>
            </view>

        </scroll-view>
        
    </view>
</template>

<script>
import {blindboxParticipationDetailsApi} from '@/api/checkedInTask'

export default {
    components: {

    },
    data() {
        return {
            navBarTitle: '七天签到盲盒',
            scrolling:false,
            params:{}, //接受从路由传过来的参数
            blindBoxInfo:{

            },
            recordList:[
                // {
                //     date:'2024/12/20',
                //     status:'已签到',
                // },
                // {
                //     date:'2024/12/20',
                //     status:'已签到',
                // },
                // {
                //     date:'2024/12/20',
                //     status:'已签到',
                // },
            ],
            taskManagementId:undefined, //任务id

        }
    },
    onLoad(data) {
      if (data && data.params) {
        this.params = JSON.parse(decodeURIComponent(data.params))
        this.taskManagementId = this.params?.taskManagementId || 45
      }
    },
    onReady(){

    },
    onShow(){
        this.blindboxParticipationDetails()
    },
    methods: {
        // 滑动
        scrollPage(e) {
            console.log(e.detail.scrollTop, this.scrolling)
            if (e.detail.scrollTop > 25 && !this.scrolling) {
                this.scrolling = true
            } else if ((e.detail.scrollTop <= 25 && this.scrolling) || (e.detail.scrollTop <= 25 && !this.scrolling)) {
                this.scrolling = false
            }
        },
        // 返回键
        onClickLeft () {
            uni.navigateBack()
        },
        // 盲盒参与详情
        blindboxParticipationDetails(){
            blindboxParticipationDetailsApi({taskManagementId:this.taskManagementId}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.recordList = res.data?.signInRecordResponses || []
                    this.blindBoxInfo = res?.data || {}
                    this.navBarTitle = res.data?.name || '七天签到盲盒'
                }
            })
        }
       
    }
}
</script>

<style lang="scss" scoped>
::v-deep #navBar .van-nav-bar {
    background-color: transparent !important;
}
.content {
    background-color: #f9f9f9;
    display: flex;
    flex-direction:column;
    height:100vh;
    overflow:hidden;
    box-sizing: border-box;
}
.scroll-content {
    flex: 1;
    height: 1px;
}
.tabTop{
    padding:0rpx 48rpx;
}
.title{
    font-size: 60rpx;
    line-height: 60rpx;
    text-align: left;
    color: #111111;
}
.checkedInDay{
    font-size: 28rpx;
    color: #111111;
    line-height: 28rpx;
    margin-top: 43rpx;
}
.mysteryBoxProgress{
    border-bottom:1px solid #f0f0f0;
    padding-top: 90rpx;
    padding-bottom: 42rpx;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.blindBoxBg{
    // padding-left: 190rpx;
    // padding-right: 190rpx;
}
.progressText{
    font-size: 30rpx;
    color: #111111;
    line-height: 30rpx;
}
.tasksProgress{
    width: 60%;
    height: 9px;
    text-align: center;
    margin-top: 36rpx;
}
.subtitle{
    padding-top:64rpx;
    margin-bottom: 83rpx;
}
.recordList{
    display:flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom:94rpx;
}

.checkInDate{
    font-size: 23rpx;
    line-height: 23rpx;
    color: #111111;
}
.checkInStatus{
    font-size: 26rpx;
    color: #888888;
    line-height: 26rpx;
}
::v-deep .van-empty__image{
    width: 400rpx !important;
    height: 400rpx !important;
    text-align: center;
}
::v-deep .van-empty__description {
    font-size: 36rpx !important;
    text-align: center;
    color: #333 !important;
}
::v-deep .van-nav-bar__left {
    width: 56px;
    height: 44px;
}

::v-deep .van-icon {
    color: #242629 !important;
}

::v-deep .van-cell{
    padding-left: 0px !important;
    border-bottom: 1px solid #f9f9f9;
}
// 滚动条 去掉自带的文字提示  
::v-deep .van-progress__pivot {
	display: none;
}
</style>
